<!--
 * @Description: 岗位选择器
 * @Author: zhailei
 * @Date: 2021-03-02 14:49:16
 * @LastEditTime: 2021-08-05 14:07:51
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\TDepartment.vue
-->
<template>
  <t-modal
    title="岗位"
    :width="1000"
    :visible="visible"
    switchFullscreen
    wrapClassName="t-popup-modal"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-row class="t-row" style="padding: 10px; margin: -10px">
      <a-col :md="8" :sm="24">
        <a-card :bordered="false">
          <a-tree
            showLine
            :tree-data="orgTree"
            @select="selectTree"
            default-expand-all
            :replaceFields="{
              children: 'children',
              title: 'orgName',
              key: 'orgCode',
            }"
          />
        </a-card>
      </a-col>
      <a-col :md="16" :sm="24">
        <a-card :bordered="false">
          <div class="toolbar flex justify-between flex-wrap">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <div class="flex justify-between flex-wrap">
                  <a-form-item label="">
                    <a-input
                      v-model="queryParam.positionText"
                      placeholder="岗位名称"
                    />
                  </a-form-item>
                  <div class="table-page-search-submitButtons flex">
                    <a-button
                      class="cu-btn-primary"
                      @click="$refs.table.refresh(true)"
                      >查询</a-button
                    >
                    <a-button
                      class="cu-btn-filter"
                      @click="
                        () => {
                          (queryParam = {}), $refs.table.refresh();
                        }
                      "
                      >重置
                    </a-button>
                  </div>
                </div>
              </a-form>
            </div>
          </div>
          <div class="page-common-sub-box">
            <s-table
              ref="table"
              size="small"
              :columns="columns"
              :data="loadData"
              :pageSize="10"
              :rowSelection="rowSelection"
              rowKey="uuid"
              showPagination="auto"
              :rowClassName="rowClassName"
              @rowClick="rowClick"
              :scroll="scrollXY"
            >
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
              <span slot="sex" slot-scope="text">
                {{ text | sexFilter }}
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleEdit(record)">编辑</a>
                  <span class="action-margin"></span>
                  <a @click="handleSub(record)" class="action-delete">删除</a>
                </template>
              </span>
            </s-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </t-modal>
</template>

<script>
import { simpleListMixin } from "@/mixins/simpleListMixin";
import { STable, Ellipsis } from "@/components";

const columns = [
  {
    title: "#",
    width: 50,
    align: "center",
    scopedSlots: {
      customRender: "serial",
    },
  },
  {
    title: "岗位名称",
    dataIndex: "positionText",
    align: "center",
  },
  {
    title: "岗位编号",
    dataIndex: "positionCode",
    align: "center",
  },
];
export default {
  name: "TableList",
  mixins: [simpleListMixin],
  components: {
    STable,
    Ellipsis,
  },
  props: {
    visible: {
      type: Boolean,
    },
  },
  data() {
    this.columns = columns;
    return {
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      rows: "", //选中行数据
      subHeight: 0,
      url: {
        getPageSet: "/mdata/sysPosition/getPageSetByTenantCode",
        getOrgTree: "/mdata/organization/getTreeSysOrganizationByTenantCode",
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        // this.queryParam.puuid = "4028804863ede3960163ee2cc35301fe";
        const requestParameters = Object.assign({}, parameter, this.queryParam);
        return this.$post(this.url.getPageSet, requestParameters).then(
          (res) => {
            return res;
          }
        );
      },
      orgTree: [],
      showFlag: true,
      orgId: "",
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      };
    },
    scrollXY() {
      let subHeight = this.subHeight ? this.subHeight : 500;
      let height = subHeight - 40 - 40;
      return { y: height };
    },
  },
  filters: {
    sexFilter(sex) {
      const sexMap = {
        0: "女",
        1: "男",
      };
      return sexMap[sex];
    },
  },
  created() {
    this.$nextTick(() => {
      this.subHeight = document.getElementsByClassName(
        "page-common-sub-box"
      )[0]?.clientHeight;
    });
    this.getData();
  },
  methods: {
    getData() {
      this.$nextTick(() => {
        if (this.showFlag) {
          this.showFlag = false;
          this.$post(this.url.getOrgTree).then((res) => {
            if (res.statusCode === 200) {
              this.orgTree = res.data;
            }
          });
        }
      });
    },
    // 树形选择事件
    selectTree(value, node, extra) {
      const tree = node.node.dataRef;
      this.queryParam.orgId = tree.id;
      this.queryParamList = Object.assign({}, this.queryParam);
      this.orgName = tree.text;
      this.$refs.table.refresh();
    },
    // 加载树形子级数据
    rowClassName(row) {
      return row.uuid === this.rows?.uuid ? "bg-bray" : ""; // 每条数据的唯一识别值
    },
    rowClick(record, index) {
      // 数据表格行点击事件
      // this.selectedRows = [];
      // this.selectedRows.push(record);
      // this.selectedRowKeys = index;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    handleSubmit() {
      if (!this.selectedRows || this.selectedRows.length == 0) {
        this.$message.warning("请选择一条数据");
        return false;
      }
      let selectedRows = {
        value: "",
        text: "",
      };
      this.selectedRows.forEach((e, index) => {
        if (index === 0) {
          selectedRows.value += e.uuid;
          selectedRows.text += e.positionText;
        } else {
          selectedRows.value += "," + e.uuid;
          selectedRows.text += "," + e.positionText;
        }
      });
      this.$emit("change", selectedRows);
      this.close();
    },
    close() {
      this.$emit("close");
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>

<style lang="less"></style>
